<template>
	<view class="withdrawalRecord">
    <z-paging ref="paging" v-model="dataList" :auto="false" @query="queryList">
		<view class="tabs" slot="top">
			<view class="tabs-item" @click="setIndex(index)" :class="currentIndex == index?'active':''" v-for="(item, index) in tabsList" :key="index">
				{{item.name}}
			</view>
		</view>
		<view class="menu">
			<view class="menu-list" v-for="(item, index) in dataList" :key="index">
				<view class="menu-list-column">
					<view class="label">提现金额</view>
					<view class="value">￥{{item.extract_price}}</view>
				</view>
				<view class="menu-list-item">
					<view class="label">提现账户</view>
					<view class="value" v-if="item.extract_type == 0">{{item.bank_name}}-{{item.bank_code}}</view>
					<view class="value" v-if="item.extract_type == 1">支付宝-{{item.alipay_code}}</view>
					<view class="value" v-if="item.extract_type == 2">微信-{{item.wechat}}</view>
				</view>
				<view class="menu-list-item">
					<view class="label">申请时间</view>
					<view class="value">{{item.create_time}}</view>
				</view>
				<view class="menu-list-item" v-if="item.status == 1">
					<view class="label">审核时间</view>
					<view class="value">{{item.status_time}}</view>
				</view>
				<view class="menu-list-item" v-if="item.status == 1">
					<view class="label">到账时间</view>
					<view class="value">{{item.status_time}}</view>
				</view>
				<view class="menu-list-item" v-if="item.status == -1">
					<view class="label">拒绝理由</view>
					<view class="value">{{item.fail_msg}}</view>
				</view>
			</view>
		</view>
    </z-paging>
	</view>
</template>

<script>
	import reqApi from "../../api/api.js";
	export default{
		data(){
			return{
				tabsList: [
					{
						name: "待审核",
						value: 0
					},
					{
						name: "已通过",
						value: 1
					},
					{
						name: "未通过",
						value: -1
					}
				],
				currentIndex: 0,
				params: {
					status: 0,
					page: 1,
					limit: 10
				},
				dataList: []
			}
		},
		onShow(){
			this.$nextTick(() => {
			  this.$refs.paging.reload();
			})
		},
		methods: {
			setIndex(index){
				this.currentIndex = index;
        this.params.status = this.tabsList[index].value;
        this.$refs.paging.reload();
			},
      queryList(pageNo, pageSize) {
        let temp = {
          page: pageNo,
          limit: pageSize,
          status: this.params.status
        }
        // 此处请求仅为演示，请替换为自己项目中的请求
        reqApi.extractList(temp).then(res => {
          console.log("返回的结果", res);
          // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
          this.$refs.paging.complete(res.data.list);
        })
      }
		}
	}
</script>

<style lang="scss" scoped>
	.menu{
		.menu-list{
			padding: 30rpx 50rpx;
			box-sizing: border-box;
			border-bottom: 2rpx solid #eee;
			background: #fff;
			.menu-list-item:last-child{
				margin-bottom: 0;
			}
			.menu-list-item{
				display: flex;
				justify-content: space-between;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				margin-bottom: 15rpx;
				.label{
					
				}
				.value{
					
				}
			}
			.menu-list-column{
				display: flex;
				flex-direction: column;
				align-items: center;
				.label{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #999999;
				}
				.value{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 48rpx;
					color: #222222;
					margin: 20rpx 0;
				}
			}
		}
	}
	.active{
		border-bottom: 2rpx solid #EEA800;
		font-weight: 500 !important;
		color: #EEA800 !important;
	}
	.withdrawalRecord{
		.tabs{
			display: flex;
			.tabs-item{
				flex: 1;
				height: 104rpx;
				line-height: 104rpx;
				text-align: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #999999;
			}
		}
	}
</style>